<template xmlns="http://www.w3.org/1999/html">
  <a-spin :spinning="confirmLoading" class="spin-box">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>

          <a-col :span="24">
            <a-form-model-item label="客户名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <a-input v-model="model.name" placeholder="请输入客户名称" @blur="formatName"></a-input>
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="上级客户" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="parentCustomerId">
              <JSelectMultiUser v-model="model.parentCustomerId"
                                :query-config="selectUserQueryConfig" :url="kehuurl" />
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="客户简称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="abbreviation">
              <a-input v-model="model.abbreviation" placeholder="请输入客户简称"></a-input>
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="客户电话" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="telephonesFalse">
              <a-button class="editable-add-btn" @click="telAdd">
                新增
              </a-button>
              <a-table
                bordered
                :dataSource="dataSource"
                :columns="columns"
                :pagination="false"
                rowKey="id"
              >
                <template slot="type" slot-scope="text, record">
                  <span>
                    <j-dict-select-tag type="list" v-model="text" dictCode="telephone_type" disabled />
                  </span>
                  <!--                  <editable-cell
                                      :ref="`phone_${record.key}`"
                                      decoratorType="integer"
                                      formType="input"
                                      :decoratorOptions="rules.phone"
                                      :defaultEditable="true"
                                      :required="true"
                                      :value="text"
                                      :text="text"
                                      placeholder="请输入手机号"
                                      :autoSave="true"
                                      @truefalseChange="truefalseChange"
                                      @valueChange="onInputChange(record.key, 'phone', $event)"
                                    />-->
                </template>

                <template slot="phone" slot-scope="text, record">
                  <span>{{ text }}</span>
                  <!--                  <editable-cell
                                      :ref="`type_${record.key}`"
                                      :decoratorOptions="rules.type"
                                      :text="record.type"
                                      :autoSave="true"
                                      :defaultEditable="true"
                                      :required="true"
                                      :value="text"
                                      formType="selectTag"
                                      dictCode="telephone_type "
                                      @selectTagChange="onCellChange(record.key, 'type',$event)"
                                    />-->
                </template>
                <span slot="operation" slot-scope="text, record,index">
                    <a @click="huikuandanTableEdit(record)">编辑</a>
                    <a-divider type="vertical" />
                    <a @click="huikuandanTableDel(index)">删除</a>
                  </span>
                <!--               <template slot="operation" slot-scope="text, record">
                      <a-popconfirm v-if="dataSource.length " title="确定要删除?" @confirm="() => batchDel(record)">
                             <span>
                               <a href="javascript:;">删除</a>
                             </span>
                                 </a-popconfirm>

                </template>-->
              </a-table>
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="address">
              <j-area-linkage v-model="model.address" type="cascader" placeholder="请选择地址" />
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="详细地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="addressInfo">
              <a-input v-model="model.addressInfo" placeholder="请输入详细地址"></a-input>
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="客户状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="state">
              <j-search-select-tag v-model="model.state" dict="customer_state" />
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="客户阶段" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="stage">
              <j-search-select-tag v-model="model.stage" dict="customer_stage" />
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="流失原因" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="lossReasons">
              <j-search-select-tag v-model="model.lossReasons" dict="customer_loss_reasons" />
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="流失备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="lossRemark">
              <a-input v-model="model.lossRemark" placeholder="请输入流失备注"></a-input>
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="负责人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="directorIds">
              <j-select-user-by-dep v-model="model.directorIds" :multi="true" @change="checkXietongrenFuzeren" />
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="协同人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="collaboratorIds">
              <j-select-user-by-dep v-model="model.collaboratorIds" :multi="true" @change="checkXietongrenFuzeren" />
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="联系人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contactss">
              <a-button @click="addContact">添加联系人</a-button>
              <a-table :columns="columnsContacts" :data-source="tempContactsArr" size="small" rowKey="id"
                       :bordered="true">
                <template slot="phoneType" slot-scope="text,record">
                  <div v-for="i in record.phoneType.split(',')" class="xiahuaxian">{{ telTypezhuanhuan(i) }}</div>
                </template>
                <template slot="phone" slot-scope="text,record">
                  <div v-for="i in record.phone.split(',')" class="xiahuaxian">{{ i }}</div>
                </template>
                <span slot="action" slot-scope="text, record,index">
                  <a @click="contactsEdit(record,index)">编辑</a>
                  <a-divider type="vertical" />
                  <a @click="contactsDel(index)">删除</a>
                </span>
              </a-table>
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="客户类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="type">
              <j-search-select-tag v-model="model.type" dict="customer_type" />
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="客户性质" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="nature">
              <j-search-select-tag v-model="model.nature" dict="customer_nature" />
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="客户分级" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="classification">
              <j-search-select-tag v-model="model.classification" dict="customter_classification" />
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="客户行业" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="industry">
              <j-search-select-tag v-model="model.industry" dict="customter_industry" />
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="重要程度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="importance">
              <a-rate v-model="importance" @change="arateChange" />
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="客户来源" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="source">
              <j-search-select-tag v-model="model.source" dict="customter_source" />
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="客户官网" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="website">
              <a-input v-model="model.website" placeholder="请输入客户官网"></a-input>
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="客户简介" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="introduction">
              <a-input v-model="model.introduction" placeholder="请输入客户简介"></a-input>
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="标签" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="labelIds">
              <a-input v-model="model.labelIds" placeholder="请输入标签"></a-input>
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="国家" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="country">
              <a-input v-model="model.country" placeholder="请输入国家"></a-input>
            </a-form-model-item>
          </a-col>

          <!--          <a-col :span="24">
                      <a-form-model-item label="归档" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="filed">
                        <j-dict-select-tag type="list" v-model="model.filed" dictCode="is_filed" placeholder="请选择归档" />
                      </a-form-model-item>
                    </a-col>-->
        </a-row>
      </a-form-model>
    </j-form-container>
    <!--    <ContactsModal ref="ContactsModal" @ok="modalFormOk"></ContactsModal>-->
    <contacts-modal ref="modalForm" @ok="modalFormOklianxiren"></contacts-modal>
    <TELModal ref="TELModal" @ok="TELOK"></TELModal>
  </a-spin>
</template>
<script>

import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'
import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDepCustom'
import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUserCustom'
import JSelectUserByDepModalCustom from '@/components/jeecgbiz/modal/JSelectUserByDepModal'
import EditableCell from '@/components/EditableCell/cell'
import { checkOnlyUser } from '@api/api'
import lianxiren from '@/components/jeecgbiz/lianxirenCustom'
import ContactsList from './ContactsList'
import ContactsModal from './ContactsModal'
import ContactsForm from './ContactsForm'
import JAreaLinkage from '@comp/jeecg/JAreaLinkage'
import TELModal from '@views/customer/modules/TELModal'

export default {
  name: 'CustomerForm',
  components: {
    JSelectUserByDep,
    JSelectMultiUser,
    JSelectUserByDepModalCustom,
    EditableCell,
    lianxiren,
    ContactsList,
    ContactsModal,
    ContactsForm,
    JAreaLinkage,
    TELModal
  },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  watch: {
    dataSource: {
      deep: true,
      immediate: true,
      handler(newValue, oldValue) {
        this.model.telephones = newValue
        if (newValue.length > 0) {
          this.model.telephonesFalse = JSON.stringify(newValue)
        } else {
          this.model.telephonesFalse = ''
        }
        console.log('电话数组', this.model)
      }
    },
    'model.customerId': {
      deep: true,
      handler(newValue, oldValue) {
        this.lianxirenUrl = '/sys/common/queryCustomerId?customerId=' + newValue
        if (!newValue) {
          this.model.contactsIds = ''
        }
      }
    },

    tempContactsArr: {
      deep: true,
      handler(val) {
        console.log('联系人数组变化', val)
      }
    }
  },
  data() {
    return {
      tempContactsArr: [],//联系人临时数组
      importance: 0,
      isShow: false,
      kehuurl: '/customer/customer/lists?filed=2',
      // 选择用户查询条件配置
      selectUserQueryConfig: [
        { key: 'telephones', label: '电话' }
      ],
      //电话表格使用=====开始
      dataSource: [],
      loading: false,
      count: 1,
      columns: [
        {
          title: '类型',//1.工作 2.手机 3.住址 4.主要 5.传真 6.其他
          dataIndex: 'type',
          scopedSlots: { customRender: 'type' }
        },
        {
          title: '电话',
          dataIndex: 'phone',
          scopedSlots: { customRender: 'phone' }
        },

        {
          title: '操作',
          dataIndex: 'operation',
          width: 120,
          scopedSlots: { customRender: 'operation' }
        }
      ],
      //联系人表格配置
      columnsContacts: [
        {
          title: '联系人姓名',
          align: 'center',
          dataIndex: 'name',
          width: '30%'
        },
        {
          title: '类型',//1.工作 2.手机 3.住址 4.主要 5.传真 6.其他
          dataIndex: 'phoneType',
          width: '20%',
          scopedSlots: { customRender: 'phoneType' }
        },
        {
          title: '联系电话',
          align: 'center',
          dataIndex: 'phone',
          width: '30%',
          scopedSlots: { customRender: 'phone' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          // fixed: 'right',
          width: 147,
          scopedSlots: { customRender: 'action' }
        }
      ],
      //电话表格使用=====结束
      //联系人
      lianxirenUrl: '/sys/common/queryCustomerId?customerId=',
      lianxirenConfig: [
        { key: 'phone', label: '电话' }
      ],
      model: {
        telephonesFalse: ''
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      validatorRules: {
        parentCustomerId: [
          { required: false, message: '请选择!' },
          {
            validator: (rule, value, callback) => {
              console.log('客户ID', this.model.id)
              console.log('上级客户', value)
              if (this.model.id && this.model.id == value) {
                console.log('客户ID', this.model.name)
                console.log('上级客户', value)
                callback(new Error('上级客户不可以选择被编辑的客户'))
              }
              callback()
            }
          }
        ],
        name: [
          { required: true, message: '请输入客户名称!' },
          {
            validator: (rule, value, callback) => {
              console.log('id', this.model.id)
              let obj = {
                value: value,
                id: this.model.id ? this.model.id : '',
                checkType: 1//客户名称类型
              }
              console.log('obj', obj)

              getAction(this.url.isRepeat, obj).then(res => {
                console.log('重名验证', res)
                if (res.result.noRepeat) {
                  callback(new Error('存在重复数据'))
                } else {
                  console.log('名称通过验证，继续')
                  callback()
                }

              })
            },
            trigger: ['blur', 'change']
          }
        ],
        telephonesFalse: [
          { required: true, message: '请输入电话!', trigger: ['change', 'blur'] }
          /* {
            validator: (rule, value, callback) => {
              if (!JSON.stringify(value)) {
                callback(new Error('不能为空'))
              }

              callback()
            },
            trigger: ['change', 'blur']
          } */
        ]
        /* directorIds: [
          { required: true, message: '请选择!' },
          {
            validator: (rule, value, callback) => {
              let fuzerenArr = value.split(',')
              let xietongrenArr = this.model.collaboratorIds.split(',')

              for (let item1 of fuzerenArr) {
                for (let item2 of xietongrenArr) {
                  if (item1 == item2) {
                    console.log('item1', item1)
                    console.log('item2', item2)
                    callback(new Error('责人和协同人之间存在重复值'))
                  }

                }
              }

              callback()
            },
            trigger: ['change', 'blur']
          }
        ],
        collaboratorIds: [
          { required: false, message: '请选择!' },
          {
            validator: (rule, value, callback) => {
              let xietongrenArr = null
              if (value) {
                xietongrenArr = value.split(',')
              } else {
                callback()
              }

              let fuzerenArr = this.model.directorIds.split(',')
              console.log('AAAAAAAAAAAAAA', !xietongrenArr)
              if (!xietongrenArr) {
                callback()
                return
              } else {
                for (let item1 of xietongrenArr) {
                  for (let item2 of fuzerenArr) {
                    if (item1 == item2) {
                      console.log('item1', item1)
                      console.log('item2', item2)

                      callback(new Error('责人和协同人之间存在重复值'))
                      return
                    }
                  }
                }
              }

              // callback()
            },
            message: '负责人和协同人之间存在重复值',
            trigger: ['change', 'blur']

          }
        ] */
      },
      fields: [
        'type',
        'phone'

      ],
      rules: {
        type: {
          rules: [
            {
              required: true,
              message: '请选择类型'
            }
          ]
        },
        phone: {
          rules: [
            {
              required: true,
              message: '请输入'
            },
            {
              validator: (rule, value, callback) => {
                let valueTrim = value.trim()
                if (!!!valueTrim) {
                  callback(new Error('不能为空!'))
                }
                let count = 0
                this.dataSource.forEach(res => {
                  if (res.phone == value) {
                    count++
                  }

                })
                console.log('count', count)
                if (count >= 2) {
                  console.log('count', count)
                  callback(new Error('子表单项不满足重复值校验!'))
                }
                console.log('修改后value', value)
                let obj = {
                  value: value,
                  id: this.model.id ? this.model.id : '',
                  checkType: 2//客户电话类型
                }
                getAction(this.url.isRepeat, obj).then(res => {
                  console.log('重名验证', res)
                  if (res.result.noRepeat) {
                    callback('存在重复数据')
                  }
                  callback()
                })

              },
              trigger: ['blur']
            }
            /* {
              validator: (rule, value, callback) => {
                var reg = /^1[3456789]\d{9}$/
                if (!reg.test(value)) {
                  callback(new Error('请输入正确手机号'))
                } else {
                  callback()
                }
              },
              message: '存在重复数据',
              trigger: ['blur']
            } */
          ]
        }
      },
      url: {
        isRepeat: '/customer/customer/isRepeat',//重名，重号验证
        add: '/customer/customer/add',
        edit: '/customer/customer/edit',
        queryById: '/customer/customer/queryById'
      }
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    }
  }
  ,

  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  }
  ,
  methods: {
    //校验负责人和协同人是否有重合
    checkXietongrenFuzeren() {
      let fuzerenArr = this.model.directorIds ? this.model.directorIds.split(',') : []
      let xietongrenArr = this.model.collaboratorIds ? this.model.collaboratorIds.split(',') : []

      console.log('负责人数据：', fuzerenArr)
      console.log('协同人数据：', xietongrenArr)
      let jieguo = [...fuzerenArr].filter(item => new Set(xietongrenArr).has(item))
      console.log('协同人和负责人比对结果', jieguo)
      if (jieguo.length > 0) {
        this.$message.error('责人和协同人之间存在' + jieguo.length + '个重复值')
        return false
      } else {
        return true
      }
      /* for (let item1 of fuzerenArr) {
        for (let item2 of xietongrenArr) {
          if (item1 == item2) {
            console.log('item1', item1)
            console.log('item2', item2)
            this.$message.error('责人和协同人之间存在重复值')
            return false
            break
          }

        }
      } */
    },
    formatName() {
      let name = this.model.name
      this.model.name = name.trim()

    },
    arateChange(e) {
      console.log(e)
      this.model.importance = e
    }
    ,
    //类型转换
    NumberChange(e) {
      return Number(e)
    }
    ,
    telTypezhuanhuan(type) {
      //1.工作 2.手机 3.住址 4.主要 5.传真 6.其他
      switch (type) {
        case '1':
          return '工作'
          break
        case '2':
          return '手机'
          break
        case '3':
          return '住址'
          break
        case '4':
          return '主要'
          break
        case '5':
          return '传真'
          break
        case '6':
          return '其他'
          break
      }
    }
    ,
    zhuanhua(obj) {
      let phoneType = []
      let phone = []
      obj.telephones.forEach(res => {
        phoneType.push(res.type)
        phone.push(res.phone)
      })
      obj.phoneType = phoneType.join(',')
      obj.phone = phone.join(',')
      return obj
    }
    ,
    telAdd() {
      /* const { count, dataSource } = this
      const newData = {
        key: count,
        phone: '',
        type: ''
      }
      this.dataSource = [...this.dataSource, newData]
      this.count += 1 */
      this.$refs.TELModal.title = '新增客户联系方式'
      this.$refs.TELModal.disableSubmit = false
      this.$nextTick(() => {
        this.$refs.TELModal.passON(this.model.telephones)
      })

      this.$refs.TELModal.add()
    }
    ,
    //回款单表格编辑
    huikuandanTableEdit(record) {
      console.log('record', record)
      let guolv = this.dataSource.filter(res => {
        return res.phone !== record.phone
      })
      console.log('除了本条，其他过滤出来的', guolv)
      this.$refs.TELModal.title = '编辑客户联系方式'
      this.$refs.TELModal.disableSubmit = false
      this.$refs.TELModal.edit(record)
      this.$refs.TELModal.passONEdit(guolv)
    },
    //回款单表格删除
    huikuandanTableDel(index) {
      console.log('index', index)
      this.dataSource.splice(index, 1)
      if (this.dataSource.length <= 0) {
        this.model.telephonesFalse = ''
      }
    },
    TELOK(res) {
      console.log('编辑回调的数据======', res)
      const { count, dataSource } = this
      if (res.id) {
        //编辑的情况
        console.log('========编辑电话状态=======')
        const dataSource = [...this.dataSource]
        let target = dataSource.find((item) => item.id == res.id)
        target = Object.assign(target, res)
        console.log('target', target)
        this.dataSource = dataSource
      } else {
        //新增的情况
        console.log('========新增电话状态=======')
        let newData = Object.assign(res, { key: count })
        this.dataSource = [...this.dataSource, newData]
        this.count += 1
      }

      //这里要区分是编辑还是新增的回传

      console.log('客户电话表格实时动态', this.dataSource)
    },
    saveTEL() {
      const newData = [...this.dataSource]
      this.model.telephones = newData
      console.log('111111111111111111111', this.model.telephones)
    }
    ,
    batchDel(record) {
      this.onDelete(record.key)
    }
    ,

    // 删除
    onDelete(key) {
      // 拷贝数组数据
      const dataSource = [...this.dataSource]
      // 过滤移除当前项目
      this.dataSource = dataSource.filter((item) => item.key !== key)
    }
    ,
    onInputChange(key, dataIndex, value) {
      const dataSource = [...this.dataSource]
      const target = dataSource.find((item) => item.key === key)
      if (target) {
        target[dataIndex] = value == '' ? undefined : value
        this.dataSource = dataSource
      }
    }
    ,
    onCellChange(key, dataIndex, value) {
      const dataSource = [...this.dataSource]
      const target = dataSource.find((item) => item.key === key)
      console.log(target)

      if (target && value == 0) {
        target[dataIndex] = value
        // dataSource[dataIndex].endDate = ''
        // dataSource[dataIndex].startDate = ''
        this.dataSource = dataSource.map((item) => {
          if (item.key === key) {
            return item
          } else {
            return item
          }
        })
      } else {
        target[dataIndex] = value
        this.dataSource = dataSource
      }
    }
    ,
    // validateRow可以提取为公共函数
    validateRow(key, fields, callback) {
      // 查找验证是否通过
      const row = {}
      let err = false
      // forEach 对每一个验证，可以更改为some满足一个就提醒
      fields.forEach((filed) => {
        let refName = `${filed}_${key}`
        let result = this.$refs[refName].validate()
        row[filed] = result.value
        if (!result.success) {
          err = true
        }
      })
      callback(err, row)
    }
    ,
    addContact() {
      this.$refs.modalForm.add()
      this.$refs.modalForm.title = '新增联系人'
      this.$refs.modalForm.disableSubmit = false
    }
    ,
    modalFormOklianxiren(e) {
      // 新增/修改 成功时，重载列表
      console.log('fixType', e)
      //这里要区分下是编辑还是新增
      if (e.fixType == 'add') {
        console.log('联系人新增接收', e)
        this.tempContactsArr.push(this.zhuanhua(e))
        console.log('this.tempContactsArr', this.tempContactsArr)
      } else if (e.fixType == 'edit') {
        this.model.contactss = e
        this.tempContactsArr[e.fixIndex] = this.zhuanhua(e)
      } else {
        console.log('未设定修改类型报错')
        this.$message.error('未设定修改类型报错')
      }

    }
    ,
    add() {
      this.edit(this.modelDefault)
      // this.model.importance = 3
      this.isShow = false
    }
    ,
    edit(record) {
      console.log('record', record)
      this.isShow = true
      this.model = Object.assign({}, record)
      if (this.model.importance) {
        this.importance = Number(this.model.importance)
      }
      if (this.model.telephones) {
        this.dataSource = this.model.telephones
      }
      //遍历下联系人，格式化显示格式
      if (this.model.contactss) {

        this.tempContactsArr = this.model.contactss.map(res => {
          let phoneType = []
          let phone = []
          res.telephones.forEach(res => {
            phoneType.push(res.type)
            phone.push(res.phone)
          })
          res.phoneType = phoneType.join(',')
          res.phone = phone.join(',')
          return res
        })
        console.log('格式化后的this.tempContactsArr', this.tempContactsArr)
      }

      this.visible = true
    }
    ,
    //联系人编辑
    contactsEdit(record, index) {
      console.log(record)
      this.$refs.modalForm.edit(record, index)
      this.$refs.modalForm.title = '编辑联系人'
      this.$refs.modalForm.disableSubmit = false
    }
    ,
    //联系人删除
    contactsDel(index) {
      console.log(index)
      this.tempContactsArr.splice(index, 1)
      this.model.contactss = this.tempContactsArr
    },
    truefalseChange(e) {
      console.log('e', e)
    },
    submitForm() {

      /* const newData = [...this.dataSource]
      console.log('this.dataSource', this.dataSource)
      console.log('this.model', this.model)
      let countA = 0
      let dianhuaJIEGUO = null
      // 一个个校验行
      newData.forEach((row) => {
        this.validateRow(row.key, this.fields, (err, values) => {
          if (!err) {
            countA++
            console.log('count', countA)
          } else {

            dianhuaJIEGUO = false
          }
        })
      })
      if (!dianhuaJIEGUO) {
        this.$message.error('请完善客户联系方式')
        return false
      } */
      //校验协同人负责人
      let XF = this.checkXietongrenFuzeren()
      if (!XF) {
        return false
      }
      if (!this.model.importance) {
        this.model.importance = 0
      }
      console.log('this.model', this.model)
      this.model.contactss = this.tempContactsArr
      // this.model.importance = this.NumberChange(this.model.importance)
      console.log('提交this.model.importance', this.model)
      const that = this
      // 触发表单验证
      this.$refs.form.validate(valid => {
        // console.log('valid', valid)
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          httpAction(httpurl, this.model, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
          })
        } else {
          console.log('提交验证失败')
        }

      })
    }

  }
}
</script>
<style scoped lang="less">
.editable-cell {
  position: relative;
}

.editable-cell-input-wrapper,
.editable-cell-text-wrapper {
  padding-right: 24px;
}

.editable-cell-text-wrapper {
  padding: 5px 24px 5px 5px;
}

.editable-cell-icon,
.editable-cell-icon-check {
  position: absolute;
  right: 0;
  width: 20px;
  cursor: pointer;
}

.editable-cell-icon {
  line-height: 18px;
  display: none;
}

.editable-cell-icon-check {
  line-height: 28px;
}

.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}

.editable-cell-icon:hover,
.editable-cell-icon-check:hover {
  color: #108ee9;
}

.editable-add-btn {
  margin-bottom: 8px;
  margin-right: 10px;
}

.xiahuaxian {
  border-bottom: 1px solid #e9e9e9;
  padding: 4px 0;
}

.xiahuaxian:last-child {
  border-bottom: none;
}


</style>